<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="联系我们"> </mh-header>
      <div class="set-form">
        <div class="tab-tit">
          <span :class='type==1 ? "cur" : ""' @click='getTab(1)'>意见反馈</span>
          <span :class='type==2 ? "cur" : ""' @click='getTab(2)'>不良举报</span>
          <span :class='type==3 ? "cur" : ""' @click='getTab(3)'>在线客服</span>
        </div>
        <div class="tab-con" v-if='type==1'>
          <textarea class="area" placeholder="请输入您要反馈的内容" v-model='content' maxlength="200"></textarea>
          <div class="mui-content-padded">
            <button type="button" class="mui-btn-block mh-btn" @click='submit'>提交申请</button>
          </div>
        </div>
        <div class="tab-con" v-if='type==2'>
          <div class="tab-info">
            <span class="tit">对方信息</span>
            <ul>
              <li>
                <span>真实姓名</span>
                <input type="text" v-model='name' maxlength="20">
              </li>
              <li>
                <span>邮箱</span>
                <input type="text" v-model='email' maxlength="20">
              </li>
              <li>
                <span>联系方式</span>
                <input type="text" v-model='phone' maxlength="11">
              </li>
            </ul>
            <span class="tit">举报原因</span>
            <div class="reason">
              诈骗钱财/酒托/饭托/茶托/色情动机/恶意中伤/广告传销
            </div>
            <div class="other">
              <span>其它原因</span>
              <input type="text" v-model='reason' maxlength="30">
            </div>
            <span class="tit">上传图片证明</span>
            <div class="upload-box">
              <div class="input-file">
                <img v-if='newImg' class="upload-img" :src="newImg">
                <input type="file" @change='uploadImg($event, 1)'>
                <span>+</span>
              </div>
            </div>
            <div class="my-contact">
                <span>我的联系方式</span>
                <input type="text" maxlength="11" v-model='my_phone'>
            </div>
          </div>
          <div class="mui-content-padded" style="margin-top:1.5rem">
            <button type="button" class="mui-btn-block mh-btn" @click='jubao'>确定举报</button>
          </div>
        </div>
        <div class="tab-con" v-if='type==3'>
          <div class="tab-img"><img src="../../assets/images/ico/set-kefu.jpg"></div>
          <div class="mui-content-padded">
            <button type="button" class="mui-btn-block mh-btn" @click='contact'>联系客服</button>
          </div>
        </div>
      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "setting",
    data () {
      return {
        type: 1,
        content: '',
        name: '',
        email: '',
        phone: '',
        my_phone: '',
        reason: '',
        newImg: ''
      }
    },
    methods: {
      uploadImg(e, type){
        let self = this;
        let formData = new FormData();
        formData.append('file', e.target.files[0]);
        formData.append('token', window.localStorage.getItem("uploadToken"));
        mui.toast('上传中');
        MH_API.uploadImg(formData).then(res => {
          if (res.key) {
            mui.toast('上传成功');
            self.newImg = MH_API.QN_url+res.key;
          }
        })
      },
      getTab(type){
        this.type = type;
      },
      submit(){
        let self = this;
        MH_API.addFeedback({
          content: self.content
        }).then(res => {
          if (res.status === 200) {
            mui.toast('提交成功');
            setTimeout(function(){
              self.$router.go(-1)
            }, 1000)
          }
          else{
            mui.toast(res.msg)
          }
        })
      },
      jubao(){
        let self = this;
        MH_API.toReport({
          to_name: self.name,
          to_email: self.email,
          to_phone: self.phone,
          from_phone: self.my_phone,
          reason: self.reason
        }).then(res => {
          if (res.status === 200) {
            mui.toast('举报成功');
            setTimeout(function(){
              self.$router.go(-1)
            }, 1000)
          }
          else{
            mui.toast(res.msg)
          }
        })
      },
      contact(){
        this.$router.push({
          path: '/messages'
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style scoped>
  .set-form{ display: block; background-color: #fff; }
  .tab-tit{ display: block; border-bottom: 1px solid #F8F8F8; line-height: 4rem; text-align: center;}
  .tab-tit span{ display: inline-block; font-size: 1.4rem; color: #B0B0B0; margin: 0 2rem;}
  .tab-tit span.cur{ color: #EB537F; border-bottom: 1px solid #EB537F;}
  .tab-con{ display: block; padding: 2rem 3rem; }
  .tab-con .area{ display: block; border: 1px solid #F8F8F8; padding: 0.5rem; min-height: 15rem;}
  .tab-con .mui-content-padded{ margin-top: 10rem; }
  .tab-img{ display: block; text-align: center;}
  .tab-img img{ display: block; height: 12.1rem; margin: 0 auto; }

  .tab-info{ display: block; font-size: 1.4rem; }
  .tab-info .tit{ display: block; color: #999; margin-bottom: 1rem;}
  .tab-info ul{ display: block; margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 1rem; overflow: hidden; }
  .tab-info li{ display: block; overflow: hidden; margin-bottom: 0.3rem;}
  .tab-info li span{ float: left; width: 7.5rem; }
  .tab-info li input{ width: 24rem; border:1px solid #eee; height: 3rem; line-height: 3rem; }
  .other{ display: block; margin-top: 1rem; color: #666; }
  .other input{ margin-top: 0.5rem; width: 32rem; border:1px solid #eee; height: 3rem; line-height: 3rem;}

  .input-file{ width: 10rem; height: 10rem; display: inline-block; margin-right: 0.5rem; background-color: #eee; line-height: 10rem; text-align: center; position: relative; }
  .input-file span{ font-size: 3rem; color: #999; }
  .input-file input{ opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; }
  .input-file .upload-img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }

  .my-contact{ display: block; border-top: 1px solid #eee; margin-top: 1rem; padding-top: 1rem; line-height: 3rem; }
  .my-contact input{ width: 22rem; border:1px solid #eee; height: 3rem; line-height: 3rem;}
</style>
